<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/details.css">
  <link rel="stylesheet" href="./css/footer.css">
</head>

<body>
  <!-- header -->
  <div id="header">
    <div class="nav">
      <div class="wrapper">
        <ul class="nav-l">
          <li><a href="">帮助中心</a></li>
          <li><a href="">收藏</a></li>
          <li><a href="">360官网</a></li>
          <li><a href="">360智慧生活</a></li>
        </ul>
        <ul class="nav-r">
          <li><a href="">登录</a></li>
          <li><a href="">注册</a></li>
          <li class="iconfont"><a href="">&#xe606;</a></li>
        </ul>
      </div>
    </div>
    <div class="nav-search">
      <div class="wrapper">
        <ul class="logo1">
          <li><a href=""><img src="./images/logo1.png" alt=""></a></li>
          <li><a href="">新品推荐</a></li>
          <li><a href="">热卖榜单</a></li>
          <div class="search-box">
            <input type="text" class="search">
            <i class="iconfont"><a href="">&#xe62f;</a></i>
          </div>
        </ul>
        <ul class="search-samll">
          <li><a href="">记录仪</a></li>
          <li><a href="">摄像机</a></li>
          <li><a href="">路由器</a></li>
          <li><a href="">耳机</a></li>
          <li><a href="">扫地机</a></li>
          <li><a href="">智能手表</a></li>
        </ul>
      </div>
    </div>
    <div class="wrapper">
      <div class="all">
        <div><a href=""><img src="./images/quanbu.png" alt=""> 全部分类</a>
          <ul class="left-nav">
            <li><a href="">家庭安防</a>
              <div class="block-1">
                <ul>
                  <li><a href="">
                      <img src="./images/block-1.1.webp" alt="">
                      <span>摄像机</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-1.2.webp" alt="">
                      <span>门铃</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-1.3.webp" alt="">
                      <span>存储卡</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-1.4.webp" alt="">
                      <span>云录卡</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-1.5.webp" alt="">
                      <span>配件</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">安全路由</a>
              <div class="block-2">
                <ul>
                  <li><a href="">
                      <img src="./images/block-2.1.webp" alt="">
                      <span>路由器</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">智能手表</a>
              <div class="block-3">
                <ul>
                  <li><a href="">
                      <img src="./images/block-3.1.webp" alt="">
                      <span>智能手表</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-3.2.webp" alt="">
                      <span>配件</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">汽车用品</a>
              <div class="block-4">
                <ul>
                  <li><a href="">
                      <img src="./images/block-4.1.webp" alt="">
                      <span>摄像机</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-4.2.webp" alt="">
                      <span>门铃</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-4.3.webp" alt="">
                      <span>存储卡</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-4.4.webp" alt="">
                      <span>云录卡</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-4.5.webp" alt="">
                      <span>配件</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">扫地机器人</a>
              <div class="block-5">
                <ul>
                  <li><a href="">
                      <img src="./images/block-5.1.webp" alt="">
                      <span>X95礼盒版</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-5.2.webp" alt="">
                      <span>C50</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-5.3.webp" alt="">
                      <span>X100 MAX</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-5.4.webp" alt="">
                      <span>洗地机F100</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">影音生活</a>
              <div class="block-6">
                <ul>
                  <li><a href="">
                      <img src="./images/block-6.1.webp" alt="">
                      <span>无线耳机</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-6.2.webp" alt="">
                      <span>运动耳机</span>
                    </a></li>
                </ul>
              </div>
            </li>
            <li><a href="">生态产品</a>
              <div class="block-7">
                <ul>
                  <li><a href="">
                      <img src="./images/block-7.1.webp" alt="">
                      <span>平衡车</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-7.2.webp" alt="">
                      <span>手写板</span>
                    </a></li>
                  <li><a href="">
                      <img src="./images/block-7.3.webp" alt="">
                      <span>其它</span>
                    </a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- main -->
  <div id="main">
    <div class="wrapper">
      <!-- fixed-right -->
      <div class="fixed-right">
        <div>
          <a href="">
            <div>意见反馈</div>
          </a>
          <a href="">
            <div>
              <img src="./images/weixin.png" alt="">
              <span>
                关注公众号
              </span>
            </div>
          </a>
          <a href="">
            <div>在线客服</div>
          </a>
        </div>
        <div>
          <a href=""></a>
          <a href="">
            <div>回到顶部</div>
          </a>
        </div>
      </div>

      <!-- main-top -->
      <div class="big-box">
        <div class="main-top-l">
          <img src="./images/details-1.webp" alt="">
          <div class="mask"></div>
          <div class="big"><img src="./images/big-box.webp" alt="" class="bigImg"></div>
          <div class="main-top-b">
            <ul>
              <li><img src="./images/box2.2.webp" alt=""></li>
              <li><img src="./images/box8.2.webp" alt=""></li>
              <li><img src="./images/box8-3.2.webp" alt=""></li>
              <li><img src="./images/box8.2.webp" alt=""></li>
              <li><img src="./images/box2.2.webp" alt=""></li>
              <li><img src="./images/box8.2.webp" alt=""></li>
              <li><img src="./images/box2.2.webp" alt=""></li>
              <li><img src="./images/box8.2.webp" alt=""></li>
            </ul>
            <span>&lt;</span>
            <span>&gt;</span>
          </div>
          <div class="main-top-text">
            <ul>
              <li><img src="./images/gou.png" alt="">360商城发货&售后</li>
              <li><img src="./images/gou.png" alt="">满99元包邮</li>
              <li><img src="./images/gou.png" alt="">7天无理由退货</li>
              <li><img src="./images/gou.png" alt="">15天免费换货</li>
            </ul>
          </div>
        </div>
        <div class="main-top-r">
          <p>360可视门铃5Pro AR1C</p>
          <p>2K超清画质 166°超广视角</p>
          <div>
            <!-- 价格 -->
            <div class="price">
              <span>价格</span>
              <span>￥399</span>
              <span>￥429</span>
            </div>
            <!-- 领劵 -->
            <div class="juan">
              <span>领劵</span>
              <span>满99.00减5.00元</span>
            </div>
            <!-- 促销 -->
            <div class="cu">
              <span>促销</span>
              <span>直降</span>
              <span>立减30.00元</span>
            </div>
          </div>
          <div>
            受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。
          </div>
          <div>
            <!-- 分类 -->
            <div class="classify">
              <span>分类</span>
              <ul>
                <li class="active">AR1C</li>
                <li>AR2CCM02</li>
                <li>P4PRO-1L43</li>
              </ul>
            </div>
            <!-- 数量 -->
            <div class="count">
              <span>数量</span>
              <a href="">-</a>
              <input type="text" value="1">
              <a href="">+</a>
            </div>
            <!-- 积分 -->
            <div class="integral">
              <span>积分</span>
              <span>购买可获得399积分 <a href=""></a></span>
            </div>
            <!-- 按钮 -->
            <div class="btn">
              <a href="">立即购买</a>
              <a href="">加入购物车</a>
              <a href=""></a>
            </div>
          </div>
        </div>
      </div>

      <!-- main-body -->
      <div class="main-body">
        <div class="wrapper">
          <a href=""><img src="./images/details.2.jpg" alt=""></a>
          <a href=""><img src="./images/details.3.jpg" alt=""></a>
          <div class="main-tab">
            <div>
              <a href="">产品详情</a>
              <a href="">规格参数</a>
              <a href="">评价(5)</a>
              <a href="">常见问题</a>
            </div>
            <div class="tab-btn">
              <a href="">立即购买</a>
              <a href="./shopping.html">加入购物车</a>
            </div>
          </div>
          <p>
            <img src="./images/details.4.webp" alt="">
          </p>
          <p>
            <img src="./images/details.5.webp" alt="">
          </p>
        </div>
      </div>
    </div>

    <!-- main-floor -->
    <div class="main-floor">
      <div class="wrapper">
        <div class="footer-box1">
          <p>关于商城</p>
          <p>360商城是奇虎360公司的官方电商平台, 主要经营360安全智能设备, 以及相关领域消费品。提供最新的360智能设备, 最贴心的售后服务, 360社区一手评测咨询, 享受360安全、安心、放心的购物体验。
          </p>
          <div>
            <span>关于我们</span>
            <span class="iconfont">&#xe607;
              <a href=""><img src="./images/weixin.png" alt=""></a>
            </span>
            <a href="" class="iconfont">&#xe65a;
              <span><img src="./images/weobo.png" alt=""></span>
            </a>
          </div>
        </div>
        <div class="footer-box2">
          <p>售后服务</p>
          <a href="">7日无理由退货</a>
          <a href="">质量问题15日内换货</a>
          <a href="">保修条款</a>
          <a href="">服务流程</a>
          <a href="">许可协议</a>
          <a href="">隐私政策</a>
        </div>
        <div class="footer-box2">
          <p>帮助中心</p>
          <a href="">用户注册</a>
          <a href="">会员说明</a>
          <a href="">登录与密码找回</a>
          <a href="">购买指南</a>
          <a href="">支付方式</a>
          <a href="">配送与说明</a>
        </div>
        <div class="footer-box3">
          <p>联系我们</p>
          <p>400-6822-360</p>
          <p>周一至周日 9:00-18:00(仅收市话费)</p>
        </div>
      </div>
    </div>

    <!-- footer -->
    <div id="footer">
      <div class="wrapper">
        <div class="box-top">
          <a href=""><span class="iconfont">&#xe60f;</span>7天无理由退货</a>
          <a href=""><span class="iconfont">&#xe608;</span>15天免费换货</a>
          <a href=""><span class="iconfont">&#xe87f;</span>满99元包邮</a>
        </div>
        <div class="box-bottom">
          <p> ©2019-2021 mall.360.cn版权所有 </p>
          <p><a href="">京ICP备08010314号-6</a>
            <a href=""> 营业执照 </a></p>
          <p>公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N |<a href="">食品经营许可证</a>
            <br>
            公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="./javascripts/jquery.js"></script>
<script src="./javascripts/main-top.js"></script>
<script src="./javascripts/fdj.js"></script>
<script src="./javascripts/require.js" data-main="./javascripts/details.js"></script>

</html>